<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>进入校园</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style>
        .login-third {
            margin-top: 3rem;
        }
    </style>
</head>

<body>
    <div id="app">
        <section class="aui-content aui-margin-t-15">
            <ul class="aui-list aui-form-list">
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label aui-border-r color-orange">
                            学校名称
                        </div>
                        <div class="aui-list-item-input aui-padded-l-10">
                            <input type="text" placeholder="学校名称" v-model="schoolName" list="dataList" @keyup="searchSchool">
                            <datalist id="dataList">
                                <option v-for="item in schools" :label="item.id" :value="item.name" :key="item.schoolId"/>
                            </datalist>
                        </div>
                    </div>
                </li>
            </ul>
        </section>
        <section class="aui-content-padded">
            <div class="aui-btn aui-btn-block aui-btn-info aui-btn-sm" tapmode @click="enterCampus">进入校园</div>
        </section>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript">
    apiready = function() {
        api.parseTapmode();
        //alert(JSON.stringify($api.getStorage('school')))
        var app = new Vue({
            el: '#app',
            data: {
                schools: [],
                schoolName: "",
            },
            mounted: function() {
                if ($api.getStorage('school')) {
                    this.openIndex();
                    setTimeout(function() {
                        api.closeWin();
                    }, 1000);
                }
            },
            methods: {
                searchSchool: function() {
                    api.ajax({
                        url: $baseUrl + 'schools?name=' + this.schoolName,
                        method: 'get'
                    }, function(ret, err) {
                        if (ret) {
                            if (ret.code === 200) {
                                app.schools = ret.data
                            }
                        } else {
                            api.toast({
                                msg: '请求异常!',
                                duration: 2000,
                                location: 'bottom'
                            });
                        }
                    });
                },
                openIndex: function() {
                    api.openWin({
                        name: 'home',
                        url: './home.html'
                    });
                },
                enterCampus: function() {
                    if (app.schoolName.length !== 0) {
                        api.ajax({
                            url: $baseUrl + 'schools/accurate?name=' + app.schoolName,
                            method: 'get'
                        }, function(ret, err) {
                            if (ret) {
                                if (ret.data) {
                                    $api.setStorage('school', ret.data);
                                    this.school = ret.data
                                    app.openIndex();
                                } else {
                                    api.toast({
                                        msg: '该学校不存在，请检查学校全称',
                                        duration: 2000,
                                        location: 'bottom'
                                    });
                                }
                            } else {
                                // api.alert({
                                //     msg: JSON.stringify(err)
                                // });
                                api.toast({
                                    msg: '请求异常!',
                                    duration: 2000,
                                    location: 'bottom'
                                });
                            }
                        });
                    } else if (app.schoolName.length > 50) {
                        api.toast({
                            msg: '学校名称不能长于50个字符',
                            duration: 2000,
                            location: 'bottom'
                        });
                    } else {
                        api.toast({
                            msg: '学校名称不能为空',
                            duration: 2000,
                            location: 'bottom'
                        });
                    }

                }
            }
        });
    };
</script>

</html>
